<template>
  <div>
    <!-- 主要内容区域 -->
    <section class="con">
      <!-- 导航路径区域 -->
      <div class="conPoin">
        <div class="conPoin">
          <a href="###">首页</a>
          <a href="###">美酒美食</a>
          <a href="###">水果蔬菜</a>
          <a>爱媛果冻橙 尝鲜3斤 6-10个</a>
        </div>
      </div>
      <!-- 主要内容区域 -->
      <div class="mainCon">
        <!-- 左侧放大镜区域 -->
        <div class="previewWrap">
          <!--放大镜效果-->
          <Zoom :skuImageList="bigImage" />
          <!-- 小图列表 -->
          <ImageList :skuImageList="likeListData" />
        </div>
        <!-- 右侧选择区域布局 -->
        <div class="InfoWrap">
          <div class="goodsDetail">
            <h3 class="InfoName">{{ likeListData.title }}</h3>
            <p class="news">{{ likeListData.intro }}</p>
            <div class="evaluate1">
              <a href="#" class="evaluatelabel1">好评率</a>
              <a class="evaluatenum1">99.7%</a>
            </div>
            <div class="priceArea">
              <div class="priceArea1">
                <div class="detail-title">价格</div>
                <div class="price">
                  <i>¥</i>
                  <em>{{ likeListData.price }}</em>
                </div>
              </div>
              <div class="priceArea2">
                <div class="detail-title">限制</div>
                <div class="fixWidth">
                  <em class="t-gray">该商品u不可以使用优惠券</em>
                </div>
              </div>
              <div class="priceArea2">
                <div class="detail-title">邮费</div>
                <div class="fixWidth">
                  <em class="t-gray">免邮,合作仓直发</em>
                </div>
              </div>
              <div class="priceArea2">
                <div class="detail-title">配送</div>
                <div class="fixWidth">
                  <em class="t-gray"
                    >至 <Select> <Option>请选择地址</Option> </Select></em
                  >
                </div>
              </div>
              <div class="priceArea2">
                <div class="detail-title">服务</div>
                <div class="fixWidth">
                  <em class="t-gray"
                    >･ 不支持无忧退换 ･ 不可用券 ･ 不可用券/红包 ･ 不可用礼品卡
                    ･ 不享受企业折扣 ･ 不享受学生折扣 ･ 国内部分地区不可配送 ･
                    不支持纸质普通发票 ･ 不支持增值税专票</em
                  >
                </div>
              </div>
            </div>
            <div class="guige">
              <ul class="guige1">
                规格
                <li
                  class="aaa"
                  v-for="gui in likeListData.standard"
                  :key="gui.id"
                >
                  <a href="#">{{ gui.name }}</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="choose">
            <div class="chooseArea">
              <div class="choosed"></div>
            </div>

            <div class="cartWrap">
              <div class="controls">
                <input
                  v-model.number="goodsNum"
                  @change="goodsNum < 1 ? (goodsNum = 1) : ''"
                  autocomplete="off"
                  class="itxt"
                />
                <a href="###" class="plus" @click="goodsNum++">+</a>
                <a
                  href="###"
                  class="mins"
                  @click="goodsNum == 1 ? (goodsNum = 1) : goodsNum--"
                >
                  -
                </a>
              </div>
              <div class="add" @click="buySomeThing">
                <a href="#">立即购买</a>
              </div>
              <div class="add1" @click="UpdateDetailNmu">
                <a href="#"
                  ><i class="iconfont icon-gouwuchekong">加入购物车</i></a
                >
              </div>
              <div class="add2">
                <a href="###" target="_blank">
                  <i class="iconfont icon-kongxinwujiaoxing"></i>
                  <span>收藏</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 猜你喜欢 -->
    <div class="like">
      <h4 class="kt">你可能还喜欢</h4>
      <Carousel :youLikeList="youLike"></Carousel>
    </div>

    <!-- 内容详情页 -->
    <section class="productDetail">
      <div class="detail">
        <div class="intro">
          <el-tabs type="border-card">
            <el-tab-pane label="详情">
              <el-table :data="tableData">
                <el-table-column prop="particulars" width="120">
                </el-table-column>
                <el-table-column prop="name" width="500"> </el-table-column>
                <el-table-column prop="property" width="120"> </el-table-column>
                <el-table-column prop="propertyname" width="120">
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="评价">
              <div>
                <div>
                  <div class="evaluate">
                    <div class="evaluatelabel">好评率</div>
                    <div class="evaluatenum">99.7%</div>
                  </div>
                  <li>
                    <div class="appraise">
                      <div class="appraisetitle">大家都在说：</div>
                      <div class="appraisevalue">
                        <span>全部(366988)</span>
                        <span>有图(3094)</span>
                        <span>追评(969)</span>
                        <span>很好喝(749)</span>
                        <span>味道好(478)</span>
                        <span>性价比高(263)</span>
                        <span>包装用心(470)</span>
                        <span>质量上乘(160)</span>
                        <span>喝着不错(91)</span>
                        <span>日期不错(80)</span>
                        <span>牛奶不错(79)</span>
                      </div>
                    </div>
                  </li>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="常见问题">定时任务补偿</el-tab-pane>

            <!-- <div>
              <img :src="likeListData.details" alt="" />
            </div> -->
          </el-tabs>
        </div>
      </div>
      <aside class="aside">
        <div class="aside-head">24小时热线</div>
        <ul>
          <li v-for="img in hotProduct" :key="img.id">
            <div class="p-img1">
              <img class="margin-left" :src="img.image" />
            </div>
            <div class="attr1">
              <em class="margin-left1">{{ img.title }}</em>
            </div>
            <div class="price1">
              <em class="margin-left2">¥</em>
              <i>{{ img.price }}</i>
            </div>
          </li>
        </ul>
      </aside>
    </section>
  </div>
</template>

<script>
import { reqDetailData, reqUpdateDetailData } from "@/api/index.js";
import Carousel from "@/components/Carousel/index.vue";
import ImageList from "./ImageList/ImageList";
import Zoom from "./Zoom/Zoom";
export default {
  name: "XDetail",
  data() {
    return {
      likeListData: {},
      // lbImageList: [],
      tableData: [
        {
          particulars: "使用场景",
          name: "代餐、聚会、早餐、其他、熬夜、加班、送礼、日常",
        },

        {
          particulars: "包装",
          name: "盒装、箱装",
          property: "种类",
          propertyname: "牛奶",
        },
        {
          particulars: "适用人群",
          name: "通用",
          property: "产地",
          propertyname: "新西兰",
        },
        {
          particulars: "保质期",
          name: "12个月",
          property: "使用场景",
          propertyname: "日常、聚会、早餐",
        },
        {
          particulars: "储藏条件",
          name: "常温",
          property: "商品规格",
          propertyname: "250毫升*24支（整箱）",
        },
        {
          particulars: "产品配料",
          name: "百分百生牛乳",
          property: "蛋白质含量",
          propertyname: "3.6克/100毫升",
        },
        {
          particulars: "温馨提示",
          name: "1、贮藏方法：常温保存，开启后需冷藏并于3日内饮用完毕。可能会有少量蛋白质沉淀和乳脂肪上浮，属正常现象，饮用前请摇匀。2、注意事项：若包装破损，请勿食用。3、网易严选出售的食品，除明确质量问题外均不接受退换货。",
        },

        {
          particulars: "包装说明",
          name: "本款存在新老包装迭代，除包装外没有任何区别，请放心选用",
        },
      ],
      goodsNumId: this.$route.params.id,
      goodsNum: 1,
    };
  },
  components: {
    ImageList,
    Zoom,
    Carousel,
  },
  async mounted() {
    this.getDetailDataList();
    // this.getLBImageList();
  },
  methods: {
    async getDetailDataList() {
      this.likeListData = await reqDetailData(this.goodsNumId);
    },

    // 加入购物车
    async UpdateDetailNmu() {
      await reqUpdateDetailData(this.goodsNumId, { number: this.goodsNum });
      this.$router.push({
        name: "shopCar",
        params: { id: this.goodsNumId },
      });
    },

    // 立即购买
    async buySomeThing() {
      await reqUpdateDetailData(this.goodsNumId, { number: this.goodsNum });
      this.$router.push({
        name: "confirmAddress",
        params: { id: this.goodsNumId },
      });
    },
  },
  computed: {
    // 猜你喜欢的
    youLike() {
      return this.likeListData.youLike || [];
    },

    // 缩略图大图的
    bigImage() {
      // return this.likeListData[0]?.youLike;
      return this.likeListData.bigImage || [];
    },

    // 24小时热线的
    hotProduct() {
      // return this.likeListData[0]?.youLike;
      return this.likeListData.hotProduct || [];
    },
  },
};
</script>

<style lang="less" scoped>
.guige {
  display: flex;
  padding-left: 5px;
  .guige1 {
    float: left;
    line-height: 30px;
    margin-top: 10px;
  }
  .aaa {
    float: right;
    background-color: #fff;
    margin-left: 10px;
    font-size: 12px;
    color: #333;
    text-align: center;
    // width: 100px;
    height: 30px;
    line-height: 30px;
    display: block;
    border: 1px solid #ddd;
    padding-left: 15px;
    padding-right: 15px;
  }
}
.con {
  width: 1200px;
  margin: 15px auto 0;
  .conPoin {
    padding: 9px 15px 9px 0;
    & > a + a:before {
      content: "/\00a0";
      padding: 0 5px;
      color: #ccc;
    }
  }
  .mainCon {
    overflow: hidden;
    margin: 5px 0 15px;
    .previewWrap {
      float: left;
      width: 300px;
      position: relative;
    }
    .InfoWrap {
      width: 700px;
      float: right;
      .InfoName {
        font-size: 20px;
        line-height: 21px;
        margin-top: 15px;
      }
      .news {
        // color: #e12228;
        color: #999;
        margin-top: 15px;
      }
      .priceArea {
        background: #f5f3ef;
        padding: 7px;
        margin: 13px 0;
        .priceArea1 {
          overflow: hidden;
          line-height: 28px;
          margin-top: 10px;
          .detail-title {
            float: left;
            margin-right: 15px;
          }
          .price {
            float: left;
            color: #c81623;
            i {
              font-size: 16px;
            }
            em {
              font-size: 24px;
              font-weight: 700;
            }
            span {
              font-size: 12px;
            }
          }
          .remark {
            float: right;
          }
        }
        .priceArea2 {
          overflow: hidden;
          line-height: 28px;
          margin-top: 10px;
          .detail-title {
            margin-right: 15px;
            float: left;
          }
          .fixWidth {
            width: 520px;
            float: left;
            .red-bg {
              background: #c81623;
              color: #fff;
              padding: 3px;
            }
            .t-gray {
              color: #999;
            }
          }
        }
      }
      .support {
        border-bottom: 1px solid #ededed;
        padding-bottom: 5px;
        .supportArea {
          overflow: hidden;
          line-height: 28px;
          margin-top: 10px;
          .detail-title {
            margin-right: 15px;
            float: left;
          }
          .fixWidth {
            width: 520px;
            float: left;
            color: #999;
          }
        }
      }
      .choose {
        .chooseArea {
          overflow: hidden;
          line-height: 28px;
          margin-top: 10px;
          .choosed {
            mark {
              height: 30px;
              display: inline-block;
              line-height: 30px;
              background-color: snow;
              border: 1px solid #ddd;
              padding: 0 20px;
              margin-right: 20px;
              a {
                font-size: 12px;
                color: red;
                margin-left: 20px;
                cursor: pointer;
              }
            }
          }
          dl {
            overflow: hidden;
            margin: 13px 0;
            dt {
              margin-right: 15px;
              float: left;
            }
            dd {
              float: left;
              margin-right: 5px;
              color: #666;
              line-height: 24px;
              padding: 2px 14px;
              border-top: 1px solid #eee;
              border-right: 1px solid #bbb;
              border-bottom: 1px solid #bbb;
              border-left: 1px solid #eee;
              &:nth-of-type(1) {
                color: red;
              }
            }
          }
        }
        .cartWrap {
          .controls {
            width: 68px;
            position: relative;
            float: left;
            margin-right: 15px;
            margin-top: 15px;
            .itxt {
              width: 58px;
              height: 45px;
              border: 1px solid #ddd;
              color: #555;
              float: left;
              border-right: 0;
              text-align: center;
            }
            .plus,
            .mins {
              width: 25px;
              text-align: center;
              height: 27px;
              line-height: 27px;
              background: #f1f1f1;
              color: #666;
              position: absolute;
              right: -8px;
              border: 1px solid #ccc;
            }
            .mins {
              right: -8px;
              top: 19px;
              border-top: 0;
            }
            .plus {
              right: -8px;
            }
          }
          .add {
            float: left;
            a {
              background-color: #f5f3ef;
              margin-top: 15px;
              margin-left: 10px;
              margin-right: 5px;
              padding: 0 25px;
              font-size: 16px;
              color: #b4a078;
              text-align: center;
              width: 130px;
              height: 45px;
              line-height: 45px;
              display: block;
              border: 1px solid #b4a078;
            }
          }
          .add1 {
            float: left;
            a {
              background-color: #b4a078;
              margin-top: 15px;
              margin-left: 10px;
              padding: 0 25px;
              font-size: 16px;
              color: #fff;
              width: 130px;
              height: 45px;
              line-height: 45px;
              display: block;
              border: 1px solid #b4a078;
              text-align: center;
            }
          }
          .icon-gouwuchekong {
            font-size: 20px;
          }
          .add2 {
            float: left;
            display: block;
            margin-top: 15px;
            margin-left: 10px;
            position: relative;
            width: 45px;
            height: 45px;
            border: 1px solid #b4a078;
            i {
              font-size: 20px;
              color: #999;
              position: absolute;
              right: 14px;
              top: 0px;
            }
            span {
              font-size: 13px;
              color: #999;
              margin-top: 25px;
              margin-left: 9px;
            }
          }
        }
      }
    }
  }
}
.productDetail {
  width: 1200px;
  margin: 30px auto 0;
  overflow: hidden;
  .aside {
    width: 250px;
    float: right;
    border: 1px solid #ccc;
  }
  .detail {
    width: 920px;
    float: left;
    .fitting {
      border: 1px solid #ddd;
      margin-bottom: 15px;
      .kt {
        border-bottom: 1px solid #ddd;
        background: #f1f1f1;
        color: #333;
        padding: 5px 0 5px 15px;
      }
      .good-suits {
        height: 170px;
        padding-top: 10px;
        .master {
          width: 127px;
          height: 165px;
          text-align: center;
          position: relative;
          float: left;
          img {
            width: 87px;
          }
          p {
            color: #c81623;
            font-size: 16px;
            font-weight: 700;
          }
          i {
            position: absolute;
            top: 48px;
            right: -25px;
            font-size: 16px;
          }
        }
        .suits {
          width: 668px;
          height: 165px;
          float: left;
          .suitsItem {
            float: left;
            width: 127px;
            padding: 0 20px;
            text-align: center;
            img {
              width: 120px;
              height: 130px;
            }
            p {
              font-size: 12px;
            }
            label {
              display: block;
              position: relative;
              input {
                vertical-align: middle;
              }
              span {
                vertical-align: middle;
              }
            }
          }
        }
        .result {
          border-left: 1px solid #ddd;
          width: 153px;
          height: 165px;
          padding-left: 20px;
          float: left;
          .num {
            font-size: 14px;
            margin-bottom: 10px;
            margin-top: 10px;
          }
          .price-tit {
            font-weight: bold;
            margin-bottom: 10px;
          }
          .price {
            color: #b1191a;
            font-size: 16px;
            margin-bottom: 10px;
          }
          .addshopcar {
            background-color: #e1251b;
            border: 1px solid #e1251b;
            padding: 10px 25px;
            font-size: 16px;
            color: #fff;
            display: inline-block;
            box-sizing: border-box;
          }
        }
      }
    }
    .intro {
      :deep(.tab-wraped) {
        background: #ededed;
        // border: 1px solid #ddd;
        overflow: hidden;
        li {
          float: left;
          & + li > a {
            border-left: 1px solid #ddd;
          }
          &.active {
            a {
              // border: 0;
              background: #e1251b;
              color: #fff;
            }
          }
          a {
            display: block;
            height: 40px;
            line-height: 40px;
            padding: 0 11px;
            text-align: center;
            color: #666;
            background: #fcfcfc;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
          }
        }
      }
      .tab-content {
        .tab-pane {
          display: none;
          &.active {
            display: block;
          }
          &:nth-child(1) {
            .goods-intro {
              padding-left: 10px;
              li {
                margin: 10px 0;
              }
            }
            .intro-detail {
              img {
                width: 100%;
              }
            }
          }
        }
      }
    }
  }
}
.like {
  width: 1200px;
  border: 1px solid #ddd;
  margin: 50px auto;
  .kt {
    border-bottom: 1px solid #ddd;
    background: #f5f5f5;
    color: #b4a078;
    margin: 0;
    padding: 5px 10px;
    font-size: 18px;
  }
  .like-list {
    width: 100px;
    padding: 15px 11px;
    overflow: hidden;

    .likeItem {
      width: 196px;
      float: left;
      .p-img {
        margin-right: 100px;
        text-align: center;
        img {
          width: 167px;
          height: 123px;
        }
      }
      .attr {
        padding: 0 15px;
      }
      .price {
        padding: 0 15px;
        font-size: 16px;
        color: #c81623;
        margin-bottom: 20px;
        margin-left: 50px;
      }
      .commit {
        padding: 0 15px;
      }
    }
  }
}
:deep(.el-carousel__item:nth-child(2n + 1)) {
  background-color: #fff;
}
.aside-head {
  height: 40px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
  font-size: 20px;
  font-weight: bold;
  line-height: 40px;
  text-align: center;
}
.aside-head1 {
  text-align: center;
  line-height: 20px;
  // background-color: blue;
}
.evaluate {
  float: left;
  border-right: 1px solid #eaeaea;
  width: 126px;
  text-align: center;
  padding-top: 4px;
  margin-right: 20px;
}
.evaluate .evaluatelabel {
  font-size: 14px;
  color: #666;
  line-height: 14px;
  margin-bottom: 15px;
}
.evaluate .evaluatenum {
  font-size: 36px;
  color: #e36844;
  line-height: 36px;
  margin-bottom: 8px;
}
.evaluate1 {
  float: right;
  width: 126px;
  text-align: center;
  padding-top: 4px;
  margin-top: -50px;
}
.evaluate1 .evaluatelabel1 {
  font-size: 14px;
  color: #666;
  line-height: 14px;
  margin-bottom: 15px;
  margin-right: 10px;
}
.evaluate1 .evaluatenum1 {
  font-size: 20px;
  color: #e36844;
  line-height: 36px;
  margin-bottom: 8px;
}
.appraise {
  width: 600px;
}
.appraisetitle {
  overflow: hidden;
  line-height: 1;
  padding-bottom: 14px;
}
.appraisevalue span {
  display: inline-block;
  margin: 0 10px 10px 0;
  padding: 0 7px 0 16px;
  line-height: 26px;
  border-radius: 100px;
  background-color: #f5f3ef;
  cursor: pointer;
}
.attr1 {
  text-align: center;
}
.price1 {
  text-align: center;
}
</style>
